<template>
  <view class="modify-nickname">
    <input
      class="input-box"
      type="text"
      v-model="nickname"
      maxlength="20"
      placeholder="请输入昵称"
      placeholder-class="placeholder_15"
      @confirm="onConfirm"
    />
    <view class="btn-fixed">
      <button class="btn-primary" @click="onConfirm">提交</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { editUserInfo } from '@/api'

const nickname = ref('')
const userStore = useUserStore()

function onConfirm() {
  const showMsg = title => uni.showToast({ title, icon: 'none' })
  if (!nickname.value) return showMsg('还没有填写昵称')
  editUserInfo({ username: nickname.value }).then(() => {
    userStore.userInfo.username = nickname.value
    showMsg('已修改')
    uni.navigateBack()
  })
}
</script>

<style scoped lang="scss">
.modify-nickname {
  .input-box {
    padding: 30rpx;
    background-color: #fff;
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
